<template>
	<div class="container">
		<div class="jx-container">
      <div class="select-type">
        <div class="item">
          <div class="right">
            <span v-for="(item, index) in typelist" :key="index" :class="params_list.type == item.label ? 'active' : ''" @click="selected(item)">{{item.label}}</span>
          </div>
        </div>
      </div>
      <div class="jx-table">
        <div class="title">
          <img class="icon" src="/static/img/icon-platform.png"/>
          汽车字典列表
          <div class="add-new">
            <el-button class="jx-btn" type="primary" @click="addRow">新增车型</el-button>
          </div>
        </div>
        <el-table :data="list" border style="width: 100%" v-loading="boo.loading">
          <el-table-column type="index" label="序列" width="60" align="center">
            <template slot-scope="scope">
              <span>{{(scope.$index + 1) + ((params_list.page - 1) * params_list.size)}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="carBrand" label="品牌" align="center" width="130">
          </el-table-column>
          <el-table-column prop="carBrandLogoImgUrl" label="品牌图标" width="130" align="center">
            <template slot-scope="scope">
              <img class="tb" :src="scope.row.carBrandLogoImgUrl"/>
            </template>
          </el-table-column>
          <el-table-column prop="carSeries" label="车系" align="center" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="carName" label="名称" align="center" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="carImgUrl" label="车辆图片" width="130" align="center" >
            <template slot-scope="scope">
              <img class="logo" :src="scope.row.carImgUrl"/>
            </template>
          </el-table-column>
          <el-table-column prop="carLevel" label="级别" align="center">
          </el-table-column>
          <el-table-column prop="carType" label="类型" align="center">
          </el-table-column>
          <el-table-column prop="onMarketDate" label="上市日期" width="150" align="center" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="isDomestic" label="进口/国产" align="center" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              {{scope.row.isDomestic ? '进口' : '国产'}}
            </template>
          </el-table-column>
          <el-table-column prop="isStop" label="是否停产" align="center" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              {{scope.row.isStop ? '是' : '否'}}
            </template>
          </el-table-column>
          <el-table-column prop="isSell" label="是否在售" align="center" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              {{scope.row.isSell ? '是' : '否'}}
            </template>
          </el-table-column>
          <el-table-column prop="marketingPrice" label="指导价（不含税）" align="center" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column label="操作" width="130" align="center">
            <template slot-scope="scope">
              <el-button @click="editRow(scope.row)" type="text" size="small">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div v-if="list.length != 0" class="jx-pagination">
          <el-pagination @current-change="pageChange" @size-change="handleSizeChange" :current-page="params_list.page" :page-sizes="[10,50,100]" :page-size="params_list.size" layout="total, sizes, prev, pager, next, jumper"
            :total="other.allRow">
          </el-pagination>
        </div>
      </div>
    </div>
    <!-- 新增/编辑车型 -->
    <el-dialog  :visible.sync="boo.showDialog" class="jx-dialog" width="80%">
      <div slot="title" class="header-title">
        <span class="title-name">{{currentRow.carId ? '编辑车型' : '新增车型'}}</span>
      </div>
      <el-form ref="form" :model="currentRow" :rules="rules" label-width="110px" class="jx-form">
        <div class="jx-detail">
          <div class="detail-item">
            <div class="item">
              <div class="title">品牌信息</div>
              <el-form-item label="" class="info-logo">
                <div class="unit logo-detail">
                  <div class="item-inline">
                    <el-upload
                      class="avatar-uploader jx-uploader"
                      name="imgFile"
                      :headers="headers"
                      :action="`${$api.common.upload}?catalog=setting_car`"
                      :show-file-list="false"
                      :on-success="uploadSuccess">
                      <img v-if="(currentRow.carBrandLogoImgUrl != '') && (currentRow.carBrandLogoImgUrl)" :src="currentRow.carBrandLogoImgUrl" class="avatar">
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload> 
                    <el-input style="max-width: 450px;width: 100%;" v-model="currentRow.carBrand" placeholder="请输入名称"></el-input>
                  </div>
                </div>
              </el-form-item>
              <el-form-item label="车系：" prop="carSeries">
                <el-select class="tel-value" v-model="currentRow.carSeries" placeholder="请选择">
                  <el-option label="奔驰E系列" value="1"></el-option>
                  <el-option label="奔驰E系列" value="2"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="名称：" prop="carName">
                <el-input v-model="currentRow.carName" placeholder="请输入名称"></el-input>
              </el-form-item>
              <el-form-item label="类型：" prop="carType">
                <el-select class="tel-value" v-model="currentRow.carType" placeholder="请选择">
                  <el-option label="轿车" value="1"></el-option>
                  <el-option label="轿车" value="2"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="级别：" prop="carLevel">
                <el-select class="tel-value" v-model="currentRow.carLevel" placeholder="请选择">
                  <el-option label="小型车" value="1"></el-option>
                  <el-option label="中型车" value="2"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="上市日期：" prop="onMarketDate">
                <el-date-picker
                  v-model="currentRow.onMarketDate"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="进口/国产：" prop="isDomestic">
                <el-radio-group v-model="currentRow.isDomestic">
                  <el-radio :label="false">国产</el-radio>
                  <el-radio :label="true">进口</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="是否停产：" prop="isStop">
                <el-radio-group v-model="currentRow.isStop">
                  <el-radio :label="true">是</el-radio>
                  <el-radio :label="false">否</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="是否在售：" prop="isSell">
                <el-radio-group v-model="currentRow.isSell">
                  <el-radio :label="true">是</el-radio>
                  <el-radio :label="false">否</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="新车指导价：" prop="marketingPrice">
                <el-input v-model="currentRow.marketingPrice" placeholder="请输入新车指导价"></el-input>
              </el-form-item>
            </div>
             <div class="item">
              <div class="title">车型图片</div>
              <el-form-item label="" prop="carImgUrl">
                <div class="unit">
                  <div class="item-inline">
                    <el-upload
                      class="avatar-uploader jx-uploader"
                      name="imgFile"
                      :headers="headers"
                      :action="`${$api.common.upload}?catalog=setting_car`"
                      :show-file-list="false"
                      :on-success="uploadpicSuccess">
                      <img v-if="(currentRow.carImgUrl != '') && (currentRow.carImgUrl)" :src="currentRow.carImgUrl" class="avatar">
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload> 
                  </div>
                </div>
              </el-form-item>
            </div>
          </div>
        </div> 
      </el-form>
      <div class="btn-container">
        <el-button class="jx-btn" type="warning" @click="boo.showDialog = false">取消</el-button>
        <el-button class="jx-btn" type="primary" :loading="boo.saveing" @click="submitRow('form')">保存</el-button>
      </div>
    </el-dialog>
	</div>
</template>

<script>
  const typelist = [
    {label: 'A',val: '1'},{label: 'B',val: '2'},{label: 'C',val: '3'},
    {label: 'D',val: '4'},{label: 'E',val: '5'},{label: 'F',val: '6'},
    {label: 'G',val: '7'},{label: 'H',val: '8'},{label: 'I',val: '9'},
    {label: 'J',val: '10'},{label: 'K',val: '11'},{label: 'L',val: '12'},
    {label: 'M',val: '13'},{label: 'N',val: '14'},{label: 'O',val: '15'},
    {label: 'P',val: '16'},{label: 'Q',val: '17'},{label: 'R',val: '18'},
    {label: 'S',val: '19'},{label: 'T',val: '20'},{label: 'U',val: '21'},
    {label: 'V',val: '22'},{label: 'W',val: '23'},{label: 'X',val: '24'},
    {label: 'Y',val: '25'},{label: 'Z',val: '26'}
  ]
	export default {
		data() {
			return {
        https: {
          list: this.$api.setting.car,
          type: this.$api.setting.shop.page,
        },
        boo: {
          loading: false,
          showDialog: false,
          saveing: false,
        },
        headers: {
          'admin-auth-token': localStorage.getItem('ms_token') || ''
        },
        other: {
          allRow: 1,
        },
        list: '',
        typelist: typelist,
        currentRow: {},
        params_list: {
          page: 1,
          size: 10,
          type: '',
        },
        rules: {
          carName: [{ required: true, message: '请输入名称', trigger: 'blur' }],
          carImgUrl: [{ required: true, message: '请选择车型图片', trigger: 'change' }],
          carSeries: [{ required: true, message: '请选择车系', trigger: 'change' }],
          carType: [{ required: true, message: '请选择类型', trigger: 'change' }],
          carLevel: [{ required: true, message: '请选择级别', trigger: 'change' }],
          onMarketDate: [{ required: true, message: '请选择上市日期', trigger: 'change' }],
          isDomestic: [{ required: true, message: '请选择进口/国产', trigger: 'change' }],
          isStop: [{ required: true, message: '请选择是否停产', trigger: 'change' }],
          isSell: [{ required: true, message: '请选择是否在售', trigger: 'change' }],
          marketingPrice: [{ required: true, message: '请输入新车指导价', trigger: 'blur' }],
        },
			}
		},
		mounted(){
      let _self = this
      _self.getList()
    },
		methods: {
      getList(){
        let _self = this
        let params = {
          pageNumber: _self.params_list.page,
          pageSize: _self.params_list.size,
          orderBy: '',
          carBrandFirstLetter: _self.params_list.type,
        }
        let success = (res)=>{
          res = res.data
          if(res.retCode == 1){
            _self.list = res.retObject.list
            _self.other.allRow = Number(res.retObject.totalRow)
          }else{
            _self.$message.error(res.retMsg)
          }
        }
        _self.$axios.get(_self.https.list.list, params, success) 
      },
      selected(item){
        let _self = this
        _self.params_list.type = item.label
        _self.getList()
      },
      pageChange(val){
        let _self = this
        _self.params_list.page = val
        _self.getList()
      },
      handleSizeChange(val) {
        let _self = this
        _self.params_list.size = val
        _self.getList()
      },
      addRow(){
        let _self = this
        _self.boo.showDialog = true
        _self.currentRow = {}
      },
      editRow(item){
        let _self = this
        _self.boo.showDialog = true
        _self.currentRow = JSON.parse(JSON.stringify(item))
      },
      // 删除
      deleteRow(item){
        let _self = this
        
      },
      uploadSuccess(res, file){
        let _self = this
      	if (res.retCode == 1) {
          _self.currentRow.carBrandLogoImgUrl = res.retObject.defaultImgDetail.path
        } else {
          _self.$message.error(res.retMsg)
        }
      },
      uploadpicSuccess(res, file){
        let _self = this
      	if (res.retCode == 1) {
          _self.currentRow.carImgUrl = res.retObject.defaultImgDetail.path
          _self.currentRow.carImgId = res.retObject.defaultImgDetail.imgId
        } else {
          _self.$message.error(res.retMsg)
        }
      },
      submitRow(formName){
        let _self = this
				this.$refs[formName].validate((vaild)=>{
					if(vaild){  
            let params = {
              carBrand: _self.currentRow.carBrand,
              carBrandLogoImgUrl: _self.currentRow.carBrandLogoImgUrl,
              carSeries: _self.currentRow.carSeries,
              carName: _self.currentRow.carName,
              carImgId: _self.currentRow.carImgId,
              carType: _self.currentRow.carType,
              carLevel: _self.currentRow.carLevel,
              onMarketDate: _self.currentRow.onMarketDate,
              isDomestic: _self.currentRow.isDomestic,
              isStop: _self.currentRow.isStop,
              isSell: _self.currentRow.isSell,
              marketingPrice: _self.currentRow.marketingPrice,
            }
            _self.boo.saveing = true
            let success = (res)=>{
              res = res.data
              if(res.retCode == 1){
                _self.getList()
              }else{
                _self.$message.error(res.retMsg)
              }
              _self.boo.saveing = false
              _self.boo.showDialog = false
            }
            if(_self.currentRow.carId){
              _self.$axios.put(`${_self.https.list.detail}${_self.currentRow.carId}`, params, success)
            }else {
              _self.$axios.post(_self.https.list.add, params, success)
            }
					}else{
						return false
					}
				})
      }
    }
	}

</script>
<style scoped lang="sass">
  .jx-table
    /deep/ .el-table__body td
      .cell
        height: auto
        line-height: auto
  .unit
    display: flex
    margin-bottom: 20px
    .item-inline
      display: flex
      margin-right: 30px
      height: 100px
      line-height: 100px
      .el-input
        max-width: 200px
        margin-left: 15px
    .time-line
      height: 50px
      line-height: 50px
  .select-type
    .item .right span
      padding: 0 5px
      font-size: 17px
      color: #333
    .item .right span.active
      background: #fff
      border: 0
      font-size: 18px
      color: #0066ff
      font-weight: 600
  .logo-detail
    margin-left: -110px
    padding: 10px 20px
    background: #f2f2f2
    .item-inline
      height: 50px
      line-height: 50px
    /deep/ .el-upload
      height: 50px
    /deep/ .jx-uploader .avatar-uploader-icon
      width: 50px
      height: 50px
      line-height: 50px
    /deep/ .jx-uploader img
      width: 50px
      height: 50px
    /deep/ .jx-form .el-form-item__content img
      max-width: 50px
      max-height: 50px
  .info-logo
    .item-inline
      width: 100%
      margin-right: 0
</style>
